<template>
	<a-layout-header>
		<div class="logo" />
		<a-menu
			v-model:selectedKeys="selectedKeys"
			theme="dark"
			mode="horizontal"
			:style="{ lineHeight: '64px' }"
			@click="jump"
		>
			<a-menu-item key="/">家族成员管理</a-menu-item>
			<a-menu-item key="/relation">成员关系管理</a-menu-item>
		</a-menu>
	</a-layout-header>
</template>

<script>
import { useRouter } from "vue-router";
export default {
	name: "Header",
	data() {
		return {
			selectedKeys: ["/"]
		}
	},
	methods: {
		jump: function ({ item, key, keyPath }) {
			this.$router.push(key)
		}
	},
}
</script>

<style scoped>
	.ant-layout-header {
		padding: 0 200px;
	}
</style>
